<!-- 国家地区增改弹窗 -->

<style lang="scss" scoped>
.el-form {
  .el-form-item {
    margin: 15px 0;
  }

  .hjd-drawer__footer {
    margin-top: 50px;
  }
}
</style>

<template>
  <el-drawer
    ref="drawer"
    custom-class="hjd-drawer"
    :title="`${status === 'add' ? '新增' : '编辑'}会员`"
    :visible.sync="showDialog"
    :wrapper-closable="true"
    @close="$emit('update:visible', false)"
  >
    <div class="hjd-drawer__content">
      <el-form v-if="formVisible" ref="dataForm" :model="form" :rules="rules" label-width="100px" style="margin-left:20px; margin-right:20px;">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>

        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="form.nickname" />
        </el-form-item>

        <el-form-item label="密码" :prop="status === 'add' ? 'password' : ''">
          <el-input v-model="form.password" type="password" />
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>

        <el-form-item label="联系方式">
          <el-input v-model="form.mobile" />
        </el-form-item>

        <el-form-item label="简介">
          <el-input v-model="form.desc" type="textarea" rows="4" resize="none" />
        </el-form-item>

        <el-form-item label="是否启用">
          <el-select
            v-model="form.status"
            style="width:100%"
            placeholder="请选择状态"
          >
            <el-option
              v-for="(label, key) in userStatus"
              :key="key"
              :label="label"
              :value="+key"
            />
          </el-select>
        </el-form-item>

        <div class="hjd-drawer__footer">
          <el-button @click="showDialog = false">
            取消
          </el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </div>

      </el-form>
    </div>
  </el-drawer>
</template>

<script>

import _ from 'lodash'
import { addMember, editMember } from '@/api/member/index'

import userStatus from '@/views/member/userStatus'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },

    status: {
      type: String,
      default: 'add'
    },

    data: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      showDialog: this.visible,

      formVisible: true,

      defaultForm: {
        username: '',
        nickname: '',
        password: '',
        email: '',
        mobile: '',
        desc: '',
        status: 0
      },

      /**
       * 表单内容
       */
      form: {},

      rules: {
        username: [{ required: true, message: '请填写用户名' }],
        nickname: [{ required: true, message: '请填写用户昵称' }],
        password: [{ required: true, message: '请填写密码' }]
      },

      userStatus
    }
  },

  watch: {
    visible(val) {
      this.showDialog = this.visible
      this.resetForm()

      if (val) {
        this.form = _.cloneDeep(this.defaultForm)

        if (this.status === 'edit') {
          this.form.uid = this.data.uid
          this.form.username = this.data.user_name
          this.form.nickname = this.data.nick_name
          this.form.password = ''
          this.form.email = this.data.email
          this.form.desc = this.data.desc
          this.form.status = this.data.status
        }
      }
    }
  },

  methods: {

    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const api = this.status === 'add' ? addMember : editMember

          api(this.form).then(() => {
            // this.$emit('reload')
            this.showDialog = false
            // 重置表单
            this.form = _.cloneDeep(this.defaultForm)

            this.$message.success(
              this.status === 'add' ? '添加成功' : '修改成功'
            )
          })
        }
      })
    },

    resetForm() {
      this.formVisible = false
      this.$nextTick(() => {
        this.formVisible = true
      })
    }

  }
}
</script>
